<template>
  <div class="BookShelfCard">
    <van-swipe-cell>
      <div class="card" >
        <!-- @click="$router.push({ name: 'BookInfo', params: { id: item._id } })" -->
        <div class="imgBox">
          <img :src="'http://statics.zhuishushenqi.com' + item.cover" alt="" />
        </div>
        <div class="content">
          <h1>{{ item.title }}</h1>
          <p class="author">{{ item.author }}</p>
          <p class="intro">{{ item.longIntro }}</p>
        </div>
      </div>
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" @click="deleteBook"/>
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
  props: ["item"],
  computed:{
    ...mapState(['user']),
  },
  methods:{
    ...mapMutations(['addUser']),
    deleteBook(){
      let user = this.user;
      let bookshelf = user.bookshelf.filter(book=> book._id!=this.item._id)
      user.bookshelf = bookshelf;
      console.log(bookshelf);
      this.addUser(user);
      let users = JSON.parse(localStorage.getItem("user"));
      users = users.map((item) => {
        if (this.user.name == item.name) {
          return this.user;
        } else {
          return item;
        }
      });
      localStorage.setItem("user", JSON.stringify(users));
    }
  }
};
</script>

<style lang="less">
.BookShelfCard {
  .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }

  .card {
    display: flex;
    padding: 10px 16px;
    .imgBox {
      position: relative;
      &:after {
        content: "";
        .Imgbg();
      }
      img {
        height: 80px;
        width: 60px;
        border-radius: 3px;
      }
    }
    .content {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 15px;
      .intro {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 16px;
      }
    }
  }
}
</style>